import React from 'react'
import { Form, Input, Button, Space, FormInstance, Select } from 'antd'

import HomeStore from '../../stores/HomeStory'
import { inject, observer } from 'mobx-react'

import '../../config/dark-theme.less'

const { Option } = Select
export interface SearchColumnType {
  key: string
  name: string
  type?: 'time' | 'string' | 'number' | 'text' | TypeList[]
  placeholder?: string
  rules?: string
  multi?: boolean
}

export interface TypeList {
  key: string
  value: string
}

interface SearchFormProps {
  HomeStore: HomeStore
  Direction?: 'horizontal' | 'vertical' | undefined
  Columns?: SearchColumnType[]
  ShowButton?: boolean
  form: FormInstance<any>
  SetDataSource?: React.Dispatch<React.SetStateAction<undefined>>
}
const SearchForm: React.FC<SearchFormProps> = (props: SearchFormProps) => {
  const {
    ShowButton = true,
    Columns = [],
    SetDataSource,
    Direction = 'horizontal',
    form,
  } = props

  return (
    <>
      {!!Columns.length ? (
        <Form
          form={form}
          onFinish={SetDataSource}
          onReset={() => form.resetFields()}
        >
          <Space size={4} direction={Direction} style={{ width: '100%' }}>
            {Columns.map((item, index) => (
              <Form.Item
                name={item.key}
                key={index}
                label={item.name}
                rules={[{ required: !!item.rules, message: item.rules }]}
              >
                {typeof item.type == 'string' ? (
                  item.type === 'text' ? (
                    <Input.TextArea maxLength={2048} />
                  ) : (
                    <Input
                      placeholder={
                        '请输入' +
                        (!!item.placeholder ? item.placeholder : item.name)
                      }
                      autoComplete='off'
                      type={item.type}
                    />
                  )
                ) : (
                  <Select
                    mode={item.multi ? 'multiple' : undefined}
                    style={{ width: '100%' }}
                    placeholder={item.placeholder}
                    optionLabelProp='label'
                  >
                    {typeof item.type == 'object'
                      ? item.type.map((k: TypeList) => {
                          return (
                            <Option value={k.key} key={k.key} label={k.value}>
                              {k.value}
                            </Option>
                          )
                        })
                      : ''}
                  </Select>
                )}
              </Form.Item>
            ))}
            {ShowButton ? (
              <>
                <Form.Item>
                  <Button type='primary' htmlType='submit'>
                    搜索
                  </Button>
                </Form.Item>
                <Form.Item>
                  <Button type='primary' htmlType='reset'>
                    重置
                  </Button>
                </Form.Item>
              </>
            ) : (
              ''
            )}
          </Space>
        </Form>
      ) : (
        ''
      )}
    </>
  )
}

export default inject('HomeStore')(observer(SearchForm))
